<template>
  <div class="group">
    <div class="main">
      <div class="head c-testimg"></div>
      <div class="cont">
        <div class="title">一小群</div>
        <div class="info">100名成员   <span>4个主题</span></div>
      </div>
      <router-link to="/dynamic/main" class="notice">
        <i class="icon-disclose"></i>
      </router-link>
    </div>
    <!--未加入-->
    <div class="no-join">
      <h2>群组介绍</h2>
      <div class="inprodu">如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。</div>
      <h2>群组成员</h2>
      <ul class="heads">
        <li class="head c-testimg"></li>
        <li class="head c-testimg"></li>
        <li class="head c-testimg"></li>
        <li class="head c-testimg"></li>
        <li class="head c-testimg"></li>
        <li class="head c-testimg"></li>
        <li class="head c-testimg"></li>
        <li class="head c-testimg"></li>
        <li class="head c-testimg"></li>
        <li class="more"><i class="icon-more"></i></li>
      </ul>
    </div>
    <!--已加入-->
    <div class="top">
      全部主题
      <div class="choice"><i class="icon-loudou"></i>筛选</div>
    </div>
    <ul class="lists">
      <li class="li" v-for="(item,index) in lists">
        <div class="option"><i class="icon-arrow2"></i></div>
        <div class="head c-testimg"></div>
        <div class="cont">
          <router-link to="/detail" class="block">
            <div class="tit">我是一位作者</div>
            <div class="text">季度里事过境迁蝴蝶终于蜕变，再没留恋谁的季度里事过境迁蝴蝶终于蜕变，再没留恋谁的......</div>
            <div class="show-all">查看全文</div>
          </router-link>
          <ul class="imgs" :class="{only:index==1}">
            <li class="c-testimg"></li>
            <li class="c-testimg" v-if="index==0"></li>
            <li class="c-testimg" v-if="index==0"></li>
          </ul>
          <div class="info">
            <span class="time">2小时前</span>
            <a class="like"><i class="icon-like"></i></a>
            <a class="reply"><i class="icon-comment"></i></a>
          </div>
          <ul class="comment">
            <li class="arrow"></li>
            <li class="list"><b>隔壁老王</b>: 我家在隔壁，隔壁是我家，智商二百五，从不爱吃苦</li>
            <li class="list"><b>广场舞大妈</b>回复<b>隔壁老王</b>: 来来来，嘿嘿嘿 </li>
          </ul>
        </div>
      </li>
    </ul>
    <div class="send-btn"><i class="icon-write"></i>发表新主题</div>
  </div>
</template>

<script>
    export default {
        name: 'group',
        data () {
            return {
                lists : [0,1]
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../assets/css/common.scss";
  .group{background-color: #fff;min-height: 100%;padding-bottom: rem(100);box-sizing: border-box;}
  .main{background-color: #98A7D5;padding: rem(65) 0 rem(65) rem(30);box-sizing: border-box;height: rem(250);position: relative;
    .head{@include img-bg-show;border-radius: 8px;width: rem(120);height: rem(120);float: left;}
    .cont{
      padding-left: rem(170);color: #fff;
      .title{font-size: rem(36);line-height: rem(50);margin-top: rem(6);}
      .info{font-size: rem(24);line-height: rem(33);margin-top: rem(16);
        span{margin-left: rem(25);}
      }
    }
    .notice{position: absolute;top: rem(74);right: rem(47);width: rem(40);height: rem(40);line-height: rem(40);text-align: center;font-size: rem(36);color: #fff;
      i{vertical-align: middle;}
    }
  }
  .top{
    line-height: rem(34);padding: rem(18) rem(30);color: $black-light;font-size: rem(24);@include border-half-all($border,'bottom');
    .choice{float: right;color: $blue;
      i{vertical-align: rem(-2);margin-right: rem(10);}
    }
  }
  .no-join{
    padding: 0 rem(30);
    h2{line-height: rem(34);padding: rem(18) 0;color: $black-light;font-size: rem(24);font-weight: normal;}
    .inprodu{line-height: rem(40);margin-bottom: rem(20);}
    .heads{height: rem(60);margin: rem(10) 0 rem(60);
      .head{@include head(60);border-radius: 100%;overflow: hidden;margin-left: rem(10);
        &:first-child{margin-left: 0;}
      }
      .more{float: left;width: rem(60);height: rem(60);border-radius: 100%;border: 1px solid $black-light;line-height: rem(60);text-align: center;margin-left: rem(10);box-sizing: border-box;color: $black-light;}
    }
  }
  .lists{
    .li{padding: rem(28) rem(40) rem(35) rem(30);overflow: hidden;@include border-half-all($border,'bottom');
      &:last-child:before{display: none;}
      .option{position: absolute;width: rem(40);height: rem(40);color: $black-light;top: rem(28);right: rem(40);line-height: rem(40);text-align: center;
        i{vertical-align: middle;font-size: rem(28);}
      }
      .head{@include head(80);}
      .cont{
        padding-left: rem(100);font-size: rem(28);
        .tit{height: rem(40);line-height: rem(40);color: $blue;}
        .text{margin-top: rem(7);line-height: rem(40);}
        .show-all{color: $blue;margin-top: rem(10);line-height: rem(40);}
        .imgs{
          margin-top: rem(11);overflow: hidden;margin-left: rem(-5);
          li{float: left;width: rem(190);height: rem(190);@include img-bg-show;margin-left: rem(5);margin-top: rem(5);}
          &.only li{float: none;width: rem(350);}
        }
        .info{margin-top: rem(20);line-height: rem(40);height: rem(40);
          .time{color: $black-light;}
          a{
            float: right;font-size: rem(32);color: $blue;width: rem(40);height: 100%;text-align: center;
            &.like{margin-left: rem(30);}
            i{vertical-align: middle;}
          }
        }
      }
    }
    .comment{
      padding: rem(5) rem(20) rem(20);margin-top: rem(26);background-color: $black-lighter;position: relative;
      .arrow{position: absolute;left: rem(24);top: rem(-26);width: 0;height: 0;border: rem(14) solid transparent;border-bottom-color: $black-lighter;}
      .list{
        margin-top: rem(10);line-height: rem(40);font-size: rem(28);
        b{font-weight: normal;color: $blue;}
      }
    }
  }
  .send-btn{@include border-half-all($border,'top');position: fixed;width: 100%;max-width: $sreen;background-color: #fff;bottom: 0;height: rem(100);text-align: center;color: $blue;font-size: rem(28);line-height: rem(100);z-index: 1;
    i{margin-right: rem(10);vertical-align: middle;}
  }
</style>
